<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
		<title>用户中心</title>
		<style type="text/css">
		.hui-slide-menu {
		    width:70%;
		    height:100%;
   		    position:fixed;
   		    z-index:99;
		    background:#edf6ff;
	        left:-70%; top:0px;
		}
		
	    .hui-slide-menu ul {
   		    padding:10px;
   		}
	  
	    .hui-slide-menu li {
   		    color:#FFFFFF;
		    line-height:44px;
	 	    height:44px;
	  	    overflow:hidden;
	  }
		
		.big-tag {
	  	    border-radius:40px;
	  	    background:#aacdee;
	  	    font-size:30px;
	  	    text-align:center;
	  	    font-weight:700;
            margin-top:10px;
	  }
    
         .small-tag {
    	    width:70%;
    	    height:35px;
    	    border-radius:40px;
        	float:right;
    	    margin:5px;
    }
    
         .number {
            width:35px;
            height:35px;
            border-radius:40px;
            float:right;
            margin:5px;
    }
    	
    @keyframes hui-a-menu-show{0%{left:-70%;} 100%{left:0%}}
	@-moz-keyframes hui-a-menu-show{0%{left:-70%;} 100%{left:0%}}
	@-webkit-keyframes hui-a-menu-show{0%{left:-70%;} 100%{left:0%}}
	@-o-keyframes hui-a-menu-show{0%{left:-70%;} 100%{left:0%}}
	.hui-slide-menu-show{-webkit-animation:hui-a-menu-show 0.3s forwards; animation:hui-a-menu-show 0.3s forwards;}
	@keyframes hui-a-menu-hide{0%{left:0%;} 100%{left:-70%}}
	@-moz-keyframes hui-a-menu-hide{0%{left:0%;} 100%{left:-70%}}
	@-webkit-keyframes hui-a-menu-hide{0%{left:0%;} 100%{left:-70%}}
	@-o-keyframes hui-a-menu-hide{0%{left:0%;} 100%{left:-70%}}
	.hui-slide-menu-hide{-webkit-animation:hui-a-menu-hide 0.3s forwards; animation:hui-a-menu-hide 0.3s forwards;}
		</style>
		<link rel="stylesheet" type="text/css" href="../css/hui.css"> 
		<script src="../js/hui-swipe.js"></script> 
	</head>
	<body style="margin:0;background: #ebecf0;">
		<div class="hui-wrap"></div> <!-- 菜单 dom 结构 --> 
		<div class="hui-slide-menu"> 
			<ul> 
				<li><span style="color:orange;font-size:35px;">■ </span><span style="color:#cab09c;font-size:30px;font-weight:700;">拾光博客</span></li> 
				<li class="big-tag">附加功能</li> 
				<li> 
					<div class="small-tag" style="background:#004986;"> 
						<a href="user.html"><p style="color:#fdffee;text-align:center;line-height:39px;">个人中心</p></a> 
					</div> 
					<div class="number" style="background:#004986;"> 
						<p style="color:white;font-size:20px;text-align:center;line-height:35px;font-weight:1000;">1</p> 
					</div> </li> <!--个人中心--> 
				<li> 
					<div class="number" style="background:#004277;"> 
						<p style="color:white;font-size:20px;text-align:center;line-height:35px;font-weight:1000;">2</p> 
					</div> 
					<div class="small-tag" style="background:#004277;"> 
						<a href="message.html"><p style="color:#fdffee;text-align:center;line-height:39px;">消息中心</p></a> 
					</div> </li> <!--消息中心--> 
				<li> 
					<div class="small-tag" style="background:#0b72b4;"> 
						<a href="image.html"><p style="color:#fdffee;text-align:center;line-height:39px;">图片仓库</p></a> 
					</div> 
					<div class="number" style="background:#0b72b4;"> 
						<p style="color:white;font-size:20px;text-align:center;line-height:35px;font-weight:1000;">3</p> 
					</div> </li> <!--图片仓库--> 
				<li> 
					<div class="number" style="background:#63a8cf;"> 
						<p style="color:white;font-size:20px;text-align:center;line-height:35px;font-weight:1000;">4</p> 
					</div> 
					<div class="small-tag" style="background:#63a8cf;"> 
						<a href="home.html"><p style="color:#fdffee;text-align:center;line-height:39px;">回到主页</p></a>
					</div> </li> <!--联系我--> 
				<li> 
					<div class="small-tag" style="background:#9abfd2;"> 
						<a href="../index.html"><p style="color:#fdffee;text-align:center;line-height:39px;">退出登录</p> </a>
					</div> 
					<div class="number" style="background:#9abfd2;"> 
						<p style="color:white;font-size:20px;text-align:center;line-height:35px;font-weight:1000;">5</p> 
					</div> </li> <!--退出登录--> 
				<li class="big-tag">网址导航</li> 
				<li> 
					<div class="small-tag" style="background:#cc2e26;"> 
						<a href="https://500px.com.cn/"><p style="color:white;text-align:center;line-height:39px;">500px</p></a> 
					</div> 
					<div class="number" style="background:#cc2e26;"> 
						<p style="color:white;font-size:20px;text-align:center;line-height:35px;font-weight:1000;">1</p> 
					</div> </li> <!--500px--> 
				<li> 
					<div class="number" style="background:#000000;"> 
						<p style="color:white;font-size:20px;text-align:center;line-height:35px;font-weight:1000;">2</p> 
					</div> 
					<div class="small-tag" style="background:#000000;"> 
						<a href="https://unsplash.dogedoge.com/"><p style="color:white;text-align:center;line-height:39px;">Unsplansh</p></a> 
					</div> </li> <!--Unsplash--> 
				<li> 
					<div class="small-tag" style="background:#e06060;"> 
						<a href="https://huaban.com/"><p style="color:white;text-align:center;line-height:39px;">花瓣网</p></a> 
					</div> 
					<div class="number" style="background:#e06060;"> 
						<p style="color:white;font-size:20px;text-align:center;line-height:35px;font-weight:1000;">3</p> 
					</div> </li> <!--花瓣网--> 
				<li> 
					<div class="number" style="background:#4080f8;"> 
						<p style="color:white;font-size:20px;text-align:center;line-height:35px;font-weight:1000;">4</p> 
					</div> 
					<div class="small-tag" style="background:#4080f8;"> 
						<a href="https://www.ui.cn/"><p style="color:white;text-align:center;line-height:39px;">UI中国</p></a> 
					</div> </li> <!--UI中国--> 
				<li style="padding-top:30px;"> <button type="button" style="width:90%;height:40px;border-radius:10px;background:#dae1e7;margin-left:5%;border:none;" class="button" onclick="hui.closeSlideMenu();">关闭菜单</button> </li> 
			</ul> 
		</div> 
		
		<div class="user-cover" style="width:95%;height:500px;background:url(../img/4.jpg);background-size:cover;border-radius:10px;margin:auto;margin-top:2%;box-shadow:-5px 5px 13px #69708c, 5px -5px 13px #ffffff;">
			<div class="hui-header-menu" style="width:45px;height:45px;position:absolute;top:5px;left:5px;border-radius:5px;" onclick="hui.showSlideMenu();"> 
				<img src="../img/menu.png" width="40%" style="margin-left:30%;margin-top:30%;"> 
			</div>
			<div class="c11" style="width: 80%;height:140px;margin-top:30%;margin-left:10%;">
				<p style="font-size:60px;color: white;font-weight: 800;font-family:'bodoni mt';letter-spacing:2px;">Honglei<br>Gan</p>
			</div>
			<a href="../index.html"><div class="login-up" style="width:27%;height:30px;border:2px solid white;border-radius:40px;margin-top:5%;margin-left:10%;">
				<p style="color: white;text-align: center;line-height:30px;font-family: '微软雅黑';">退出登录&nbsp;&#x2192;</p>
			</div></a>
		</div>
	</div>
		
		<div class="user-information" style="width:95%;height:120px;border-radius:10px;margin:auto;margin-top:5%;background:linear-gradient(225deg, #ebecf0, #ebecf0);box-shadow:-5px 5px 13px rgba(128,135,157,0.5),5px -5px 13px #ffffff;">
			<p style="font-size:17px;color:#7eabb0;text-indent:1em;text-shadow:2px 2px 2px #ffffff;">邮箱：3296322638@qq.com</p>
			<p style="font-size:17px;color:#7eabb0;text-indent:1em;text-shadow:2px 2px 2px #ffffff;">居住地：武汉</p>
			<p style="font-size:17px;color:#7eabb0;text-indent:1em;text-shadow:2px 2px 2px #ffffff;">性别：保密</p>
			<p style="font-size:17px;color:#7eabb0;text-indent:1em;text-shadow:2px 2px 2px #ffffff;">生日：保密</p>
			<p style="font-size:17px;color:#7eabb0;text-indent:1em;text-shadow:2px 2px 2px #ffffff;">爱好：编程/骑行/电子</p>
	    </div>
		
		<div class="user-love" style="width:95%;height:500px;border-radius:10px;margin:auto;margin-top:5%;background:linear-gradient(225deg, #ebecf0, #ebecf0);box-shadow:-5px 5px 13px rgba(128,135,157,0.5),5px -5px 13px #ffffff;">
			<p style="font-size:20px;color:#7eabb0;text-indent:1em;text-shadow:2px 2px 2px #ffffff;border-bottom:5px solid #ED2D22;width:100px;">我的收藏</p>
			<br>
			<a href="passage4.html"><p style="font-size:17px;color:#eedbb0;text-indent:2em;text-shadow:2px 2px 2px #ffffff;line-height:30px;">02.01 | 欢迎访问拾光博客</p></a>
			<a href="passage1.html"><p style="font-size:17px;color:#eedbb0;text-indent:2em;text-shadow:2px 2px 2px #ffffff;line-height:30px;">02.01 | 今天是春节</p></a>
			<a href="passage2.html"><p style="font-size:17px;color:#eedbb0;text-indent:2em;text-shadow:2px 2px 2px #ffffff;line-height:30px;">02.01 | 北京冬奥会即将开幕</p></a>
			<a href="passage.html"><p style="font-size:17px;color:#eedbb0;text-indent:2em;text-shadow:2px 2px 2px #ffffff;line-height:30px;">02.01 | 元日</p></a>
			<br >
            <p style="font-size:19px;color:#7eabb0;text-indent:2em;text-shadow:2px 2px 2px #ffffff;line-height:30px;">呜呜呜~到底了.</p>
	    </div>
	    
		<script type="text/javascript" src="../js/hui.js" charset="UTF-8"></script> 
		<script src="js/hui-swipe.js" type="text/javascript" charset="utf-8"></script> 
		<script type="text/javascript">
			var swipe = new huiSwpie('#swipe');
			swipe.autoPlay=true;
			swipe.run();
		</script> 
		<script>
			/*
			swip
			*/
			hui.slideMenu();
			slide menu;
			*/
			hui.slideMenu();
		</script>  
	</body>
</html>
